import React, { useState } from 'react';
import CommentList from './CommentList';
import { COMMENTS } from './data';
import CommentFilter from './CommentFilter';
import CommentInput from './CommentInput';

const CommentApp = () => {
  const [comments, setComments] = useState(COMMENTS);
  const [activeType, setActiveType] = useState('ALL');
  return (
    <div>
      <CommentInput comments={comments} setComments={setComments} />
      <CommentFilter setActiveType={setActiveType} />
      <CommentList activeType={activeType} comments={comments} />
    </div>
  );
};

export default CommentApp;
